---
export const prerender = true

import { getCollection } from 'astro:content';
import DefaultPageLayout from '$/layouts/default.astro'

let title = 'All Tags'
let description = 'All the tags used so far...'


const allPosts = await getCollection('blog');
const tags = [...new Set([].concat.apply([], allPosts.map(post => post.data.tags)))]
---

<DefaultPageLayout content={{ title, description }}>
    <ul class="tag-list">
     {tags.map((tag) => (
        <li><a class="tag" href={`/tags/${tag}`} title={`View posts tagged under "${tag}"`} transition:animate="slide">{tag}</a></li>
    ))}
    </ul>
</DefaultPageLayout>

<style>
    .tag-list {
        @apply list-none flex gap-2 flex-wrap
    }
    .tag {
        @apply inline-block text-xl px-4 py-1 rounded-full text-theme-primary bg-theme-dark-primary dark:bg-theme-primary dark:text-theme-dark-primary hover:bg-theme-primary hover:text-theme-dark-primary dark:hover:bg-theme-dark-primary dark:hover:text-theme-primary
    }
</style>
